<template>
  <div>
    <div class="row">
      <carousel-3d
        :autoplay="true"
        :autoplayTimeout="3000"
        :perspective="35"
        :display="3"
        :animationSpeed="1000"
        :width="cWidth"
        :height="300"
        controlsVisible
        :controlsHeight="60"
      >
        <slide v-for="(slide, i) in slides" :index="i" :key="slide.id">
          <img class="slide" :src="slide.src" />
        </slide>
      </carousel-3d>
    </div>
    <div class="j-pageMain">
      <div class="row course-list">
        <div class="col-lg-12">
          <div class="course-list-header col-lg-12 row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-left">
              <h4 class="all_course">全部课程</h4>
            </div>
            <h5 class="col-lg-8 col-md-8 col-sm-8 col-xs-8 text-right">
<!--              <a>更多</a>-->
            </h5>
          </div>
          <!-- item in allList 循环读取课程列表 -->
          <ul class="infinite-list" style="overflow: hidden;">
            <transition-group tag="ul" name="list">
              <li
                class="col-lg-12"
                v-for="(item, index) in courseList"
                :key="index"
                @click="toCourse(item)"
              >
                <div class="row hover course-list-item">
                  <div class="col-lg-3 col-md-4 col-sm-4">
                    <div class="thumbnail">
                      <img :src="item.courseImageUrl" alt="课程封面" />
                    </div>
                  </div>
                  <div class="caption col-lg-9 col-md-8 col-sm-8">
                    <h4 class="">{{ item.name }}</h4>
                    <p class="caption-brief">
                      {{ item.detail }}
                    </p>
                    <div class="sub-text course-list-item-bottom">
                      <b v-if="item.status === '1'">正在进行中</b>
                      <b v-else>未开始</b>
                    </div>
                  </div>
                </div>
              </li>
            </transition-group>
          </ul>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { listCourse, getCourse, delCourse, addCourse, updateCourse, listAllCourse } from "@/business/api/course";

  export default {
    name: 'index',
    created() {
      this.getList()
      this.changeWidth()
    },
    computed: {
    },
    mounted() {
      window.onresize = () => {
        this.changeWidth()
      }
    },
    data() {
      return {
        // isShowBackTop: false,
        isLoged: false,
        busy: false,
        cWidth: 800,
        count: 10,
        slides: [
          {
            id: '1',
            src: require('@/assets/images/banner.jpg'),
          },
          {
            id: '2',
            src: require('@/assets/images/banner.jpg'),
          },
          {
            id: '3',
            src: require('@/assets/images/banner.jpg'),
          },
        ],
        // 总条数
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        courseList: [],
      }
    },
    components: {},
    methods: {
      toCourse(item) {
        this.$store.commit('app/SET_COURSE_INFO', item)
        this.$router.push('/business/train_center/sport_course/detail')
      },
      getScrollBottom() {
        // 监听进度条到底部的距离
        let scrollTop = this.getScrollTop()
        let windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        let scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight
        let scrollBottom = scrollHeight - windowHeight - scrollTop
        if (Math.abs(scrollBottom) < 5) {
          return 0
        } else {
          return scrollBottom
        }
      },
      getScrollTop() {
        let scrollPos
        if (window.pageYOffset) {
          scrollPos = window.pageYOffset
        } else if (document.compatMode && document.compatMode !== 'BackCompat') {
          scrollPos = document.documentElement.scrollTop
        } else if (document.body) {
          scrollPos = document.body.scrollTop
        }
        return scrollPos
      },
      async getList() {
        // 获取课程信息
        listAllCourse(this.queryParams).then((response) => {
          this.courseList = response.rows
          this.total = response.total
          console.log('courseList', this.courseList)
        })
      },
      //根据电脑分辨率设置轮播图宽度
      changeWidth() {
        if (
          document.body.clientWidth >= 1700 &&
          document.body.clientWidth < 1920
        ) {
          this.cWidth = 800
        }
        if (
          document.body.clientWidth >= 1500 &&
          document.body.clientWidth < 1700
        ) {
          this.cWidth = 600
        }
        if (document.body.clientWidth < 1500) {
          this.cWidth = 400
        }
      },

      pullingUpLoad() {
        console.log('上拉加载更多')
        // 这里是要对currentType所对应的选项进行加载
        //然后这个上拉加载事件是不会再次发生了，所以每次它上拉加载完成了之后，调用一下结束当前上拉加载的方法
        //这样就可以再次调用上拉加载方法了
        // this.$refs.scroll.scroll.finishPullUp();
      },
      topClick() {
        this.$refs.scroll.scroll.scrollTo(0, 0, 500)
      },
    },
  }
</script>

<style scoped>
  .slide {
    height: 100%;
  }

  .content {
    overflow: hidden;
  }

  .course-list-header {
    margin: 5px;
  }

  ul {
    margin: -20px;
    width: 98%;
  }

  ul li {
    list-style: none;
    margin: 10px auto;
  }

  .thumbnail {
    border: 0;
  }

  .thumbnail img {
    display: block;
    height: 200px;
    border-radius: 15px;
  }

  .caption {
    top: 0;
    bottom: 0;
  }
  .course-list-item {
    height: 240px;
    margin-top: 10px;
    padding: 15px;
  }
  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }

  ​ .list-enter-active,
  .list-leave-active {
    transition: all 0.3s ease;
  }
  .stuNum {
    margin: 15px 0 0 0;
    left: 0;
  }
</style>
